<script setup>
import {reactive, ref, toRaw, toRef} from "vue"
import {ElMessage} from "element-plus";
import useStore from "@/store/index";
import request from "@/utils/request";
import router from "@/router";

const store = useStore();
let uuid=ref('')
const loginData = reactive({
  email: "",
  gender: null,
  nickName: "",
  password: "",
  loginData:1,
  isAdmin:1,
  captchaCard:"",
  captcha:{
  }
})
let emailReg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
const isEmail = (email) => {
  return emailReg.test(email);
}

const rules = reactive({
  email: [
    {required: true, message: '请输入邮箱账号', trigger: 'blur'},
    {type: 'email', message: '邮箱格式错误，请重新输入', trigger: ['blur'],},
  ],
  captchaCard: [
    {required: true, message: '请输入邮箱验证码', trigger: 'blur'},
  ],
  nickName: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
  ],
  gender: [
    {required: true, message: '请选择性别', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
})
const ruleFormRef = ref()

/**
 * 发送邮箱验证码
 */
const sendRegisterCaptcha = () => {
  request.get(`/user/captcha/${toRaw(loginData.email)}`).then((res)=>{
      console.log("res:",res);
      if(res.code===200){
        uuid.value=res.data
        ElMessage.success('验证码发送成功')
      }else{
        ElMessage.error('验证码发送失败，请稍后重试')
      }
  }).catch((err)=>{
      console.log("err:",err);
  })
}
const login = () => {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      console.log('login:', toRaw(loginData));
      loginData.captcha={
        uuid:uuid.value,
        captchaCard:loginData.captchaCard
      }
      delete loginData.captchaCard
      request.post('/user/register', toRaw(loginData)).then((res) => {
        console.log("res:", res);
        if (res.code === 200) {
          ElMessage.success(`${res.msg}`)
          // 注册成功，前往登录
          router.push('/login')
        } else {
          ElMessage.error(`${res.msg}`)
        }
      }).catch((err) => {
        console.log("err:", err);
      })
    }else{
      console.log('error:',loginData)
    }
  })
}

// 选择性别
const user_sex_gender_options = [
  {
    value: 1,
    label: '男',
  },
  {
    value: 0,
    label: '女',
  }
]

/**
 * 文件列表，单个属性分为name和url
 * @type {Ref<UnwrapRef<*[]>>}
 */
const fileList = ref([])


</script>

<template>
  <div style="height: 100vh; overflow: hidden;">
    <div
        style="width: 400px; margin: 100px auto; background-color: white; border: 1px solid #ddd; padding: 30px; border-radius: 10px">
      <el-form
          ref="ruleFormRef"
          :model="loginData"
          :rules="rules"
          size="large"
          status-icon
      >
        <div style="text-align: center; color: dodgerblue; font-size: 30px; font-weight: bold; margin-bottom: 10px">注
          册
        </div>
        <el-form-item prop="email">
          <el-input v-model="loginData.email" placeholder="请输入您的邮箱"/>
        </el-form-item>
        <el-form-item prop="captchaCard">
          <el-input v-model="loginData.captchaCard" placeholder="请输入邮箱验证码" style="width: 60%"/>
          <el-button type="primary" style="width: 30%;margin-left: 15px" @click="sendRegisterCaptcha" :disabled="!isEmail(loginData.email)">发送验证码
          </el-button>
        </el-form-item>
        <el-form-item prop="nickName">
          <el-input v-model="loginData.nickName" placeholder="请输入您的昵称" maxlength="18"/>
        </el-form-item>
        <el-form-item prop="gender">
          <el-select
              v-model="loginData.gender"
              class="m-2"
              placeholder="请选择您的性别"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in user_sex_gender_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginData.password" show-password placeholder="请输入您的密码"/>
        </el-form-item>
        <el-form-item prop="isAdmin">
          <el-radio-group v-model="loginData.isAdmin" size="large">
            <el-radio-button label="1" :value="1" >货车司机</el-radio-button>
            <el-radio-button label="2" :value="2" >货主用户</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="login">注 册</el-button>
        </el-form-item>
        <div style="text-align: right"><a style="text-decoration: none; color: dodgerblue"
                                          href="/login">已有账号？去登录</a></div>
      </el-form>
    </div>
  </div>
</template>

